<template>
  <div
    style="
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    "
  >
    <el-dialog
      :title="content24"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input v-model="password"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ content22 }}</el-button>
        <el-button type="primary" @click="submitNewPassword">{{
          content23
        }}</el-button>
      </span>
    </el-dialog>

    <!-- <div style="position: absolute; right: 0px; top: 20px">
      <el-dropdown @command="handleCommand1">
        <span
          class="el-dropdown-link"
          style="display: flex; align-items: center; width: 130px"
        >
          <img
            src="../assets/语言.png"
            style="width: 22px; height: 22px"
            alt=""
          />
          <div
            style="
              font-size: 15px;
              font-weight: 400;
              text-align: LEFT;
              color: black;
              margin: 0 30px 0 7px;
              cursor: pointer;
            "
          >
            {{ language }}
          </div>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="English">English</el-dropdown-item>
          <el-dropdown-item command="简体中文">简体中文</el-dropdown-item>
          <el-dropdown-item command="繁体中文">繁体中文</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div> -->

 

  

    <el-dialog
      :title="content1"
      :visible.sync="dialogVisible1"
      width="833px"
      custom-class="tree-cesium-container"
      :before-close="handleClose"
    >
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          background: white;
          align-items: center;
        "
      >
        <div
          style="
            width: 100%;
            height: 38px;
            background: #2f6fb7;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div
            style="
              font-size: 18px;
              font-weight: 400;
              color: #fff;
              margin-left: 25px;
            "
          >
            {{ content2 }}
          </div>
        </div>
        <el-form
          label-position="right"
          label-width="200px"
          :model="commandForm"
          style="margin: 60px 0; color: white"
        >
          <el-form-item :label="'展厅名称'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.exhibitionHall"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'展廳名稱'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.exhibitionHallInTraditional"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'Exhibition Hall Name'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.exhibitionHallInEnglish"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'屏幕名称'">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.screenName"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'屏幕名稱'">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.screenNameInTraditional"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'Screen Name'">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.screenNameInEnglish"
              />
            </div>
          </el-form-item>
          <el-form-item :label="content5">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.sequenceId"
              />
            </div>
          </el-form-item>
          <el-form-item :label="content6">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="commandForm.streamUrl"
              />
            </div>
          </el-form-item>
        </el-form>
        <div label="">
          <div
            style="
              margin-left: 29px;
              width: 100%;
              height: 41px;
              font-size: 22px;
              font-weight: 400;
              color: #fff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 52px;
            "
          >
            <div
              v-if="commandForm.id != null"
              @click="deleteScreenById(commandForm.id)"
              style="
                width: 177px;
                height: 39px;
                background: red;
                border-radius: 5px;
                cursor: pointer;
                color: white;
                text-align: center;
                line-height: 39px;
              "
            >
              {{ content7 }}
            </div>
            <div style="display: flex; align-items: center">
              <div
                @click="submitNewScreen"
                style="
                  width: 177px;
                  height: 39px;
                  background: #2f6fb7;
                  border-radius: 5px;
                  cursor: pointer;
                  text-align: center;
                  line-height: 39px;
                "
              >
                {{ content8 }}
              </div>
              <div
                @click="dialogVisible1 = false"
                style="
                  width: 177px;
                  height: 39px;
                  background: #101937;
                  border-radius: 5px;
                  cursor: pointer;
                  text-align: center;
                  line-height: 39px;
                "
              >
                {{ content9 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="content1"
      :visible.sync="dialogVisible2"
      width="833px"
      custom-class="tree-cesium-container"
      :before-close="handleClose"
    >
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          background: white;
          align-items: center;
        "
      >
        <div
          style="
            width: 100%;
            height: 38px;
            background: #2f6fb7;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div
            style="
              font-size: 18px;
              font-weight: 400;
              color: #fff;
              margin-left: 25px;
            "
          >
            {{ content10 }}
          </div>
        </div>
        <el-form
          label-position="right"
          label-width="200px"
          :model="commandForm"
          style="margin: 60px 0; color: white"
        >
          <el-form-item :label="'页面名称'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.iframeName"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'頁面名稱'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.iframeNameInTraditional"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'Page Name'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.iframeNameInEnglish"
              />
            </div>
          </el-form-item>
          <el-form-item :label="content25" style="color: white">
            <div
              style="
                display: flex;
                align-items: center;
                margin-left: 29px;
                align-items: center;
                margin-top: 10px;
              "
            >
              <select v-model="IframeForm.monMenu">
                <option value="-1">无</option>
                <option
                  v-for="(item, index) in iframeList"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.iframeName }}
                </option>
              </select>
            </div>
          </el-form-item>
          <el-form-item :label="content26" style="color: white">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <el-radio
                style="margin-left: 29px"
                v-model="IframeForm.isMenuItem"
                label="1"
                >{{ content29 }}</el-radio
              >
              <el-radio v-model="IframeForm.isMenuItem" label="2">{{
                content30
              }}</el-radio>
            </div>
          </el-form-item>
          <el-form-item
            v-if="IframeForm.isMenuItem == '2'"
            :label="content34"
            style="color: white"
          >
            <div style="display: flex; align-items: center; margin-top: 10px">
              <el-radio
                style="margin-left: 29px"
                v-model="IframeForm.isAudioControl"
                :label="1"
                >{{ content29 }}</el-radio
              >
              <el-radio v-model="IframeForm.isAudioControl" :label="0">{{
                content30
              }}</el-radio>
            </div>
          </el-form-item>

          <el-form-item
            v-if="
              IframeForm.isMenuItem == '2' && IframeForm.isAudioControl == 0
            "
            :label="'页面网址'"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.iframeUrl"
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="
              IframeForm.isMenuItem == '2' && IframeForm.isAudioControl == 0
            "
            :label="'頁面網址'"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.iframeUrlTraditional"
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="
              IframeForm.isMenuItem == '2' && IframeForm.isAudioControl == 0
            "
            :label="'Page URL'"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.iframeUrlEnglish"
              />
            </div>
          </el-form-item>
          <el-form-item :label="content27">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <el-radio
                style="margin-left: 29px"
                v-model="IframeForm.needPassword"
                label="1"
                >{{ content29 }}</el-radio
              >
              <el-radio v-model="IframeForm.needPassword" label="2">{{
                content30
              }}</el-radio>
            </div>
          </el-form-item>
          <el-form-item :label="content28">
            <div style="display: flex; align-items: center">
              <input
                :disabled="IframeForm.needPassword == '2'"
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.password"
              />
            </div>
          </el-form-item>

          <el-form-item
            v-if="IframeForm.isAudioControl == 1"
            :label="content31"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.audioServerIp"
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="IframeForm.isAudioControl == 1"
            :label="content32"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="IframeForm.audioServerPort"
              />
            </div>
          </el-form-item>

          <el-form-item
            v-if="IframeForm.isAudioControl == 1"
            :label="'获取音量指令'"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                placeholder="示例：Get DanteInput1 Gain 0,1 #"
                v-model="IframeForm.commandToGetCurrentVolume"
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="IframeForm.isAudioControl == 1"
            :label="'音量变化指令（变化值请填充x）'"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                placeholder="示例：Set DanteInput1 Step 0,1 x #"
                v-model="IframeForm.commandToChangeCurrentVolume"
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="IframeForm.isAudioControl == 1"
            :label="'静音指令（状态值值请填充x）'"
          >
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                placeholder="示例：Set DanteInput1 Mute 0,1 x #"
                v-model="IframeForm.commandToMuteCurrentVolume"
              />
            </div>
          </el-form-item>
        </el-form>
        <div label="">
          <div
            style="
              margin-left: 29px;
              width: 100%;
              height: 41px;
              font-size: 22px;
              font-weight: 400;
              color: #fff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 52px;
            "
          >
            <div
              v-if="IframeForm.id != null"
              @click="deleteIframeById(IframeForm.id)"
              style="
                width: 177px;
                height: 39px;
                background: red;
                border-radius: 5px;
                cursor: pointer;
                color: white;
                text-align: center;
                line-height: 39px;
              "
            >
              {{ content13 }}
            </div>
            <div style="display: flex; align-items: center">
              <div
                @click="submitNewIframe"
                style="
                  width: 177px;
                  height: 39px;
                  background: #2f6fb7;
                  border-radius: 5px;
                  cursor: pointer;
                  text-align: center;
                  line-height: 39px;
                "
              >
                {{ content8 }}
              </div>
              <div
                @click="dialogVisible2 = false"
                style="
                  width: 177px;
                  height: 39px;
                  background: #101937;
                  border-radius: 5px;
                  cursor: pointer;
                  text-align: center;
                  line-height: 39px;
                "
              >
                {{ content9 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="content1"
      :visible.sync="dialogVisible3"
      width="833px"
      custom-class="tree-cesium-container"
      :before-close="handleClose"
    >
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          background: white;
          align-items: center;
        "
      >
        <div
          style="
            width: 100%;
            height: 38px;
            background: #2f6fb7;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div
            style="
              font-size: 18px;
              font-weight: 400;
              color: #fff;
              margin-left: 25px;
            "
          >
            {{ content14 }}
          </div>
        </div>
        <el-form
          label-position="right"
          label-width="200px"
          :model="commandForm"
          style="margin: 60px 0; color: white"
        >
          <el-form-item :label="'节目名称'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="ProgramForm.programName"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'節目名稱'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="ProgramForm.programNameInTraditional"
              />
            </div>
          </el-form-item>
          <el-form-item :label="'Program Name'" style="color: white">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="ProgramForm.programNameInEnglish"
              />
            </div>
          </el-form-item>

          <el-form-item :label="'CueId'">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="ProgramForm.cueId"
              />
            </div>
          </el-form-item>
          <el-form-item :label="content16">
            <div style="display: flex; align-items: center">
              <input
                style="
                  margin-left: 29px;
                  width: 460px;
                  height: 41px;
                  background: #0e152c;
                  border-radius: 5px;
                  font-size: 22px;
                  font-weight: 400;
                  color: #fff;
                "
                v-model="ProgramForm.sqId"
              />
            </div>
          </el-form-item>
        </el-form>
        <div label="">
          <div
            style="
              margin-left: 29px;
              width: 100%;
              height: 41px;
              font-size: 22px;
              font-weight: 400;
              color: #fff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 52px;
            "
          >
            <div
              v-if="ProgramForm.id != null"
              @click="deleteProgramById(ProgramForm.id)"
              style="
                width: 177px;
                height: 39px;
                background: red;
                border-radius: 5px;
                cursor: pointer;
                color: white;
                text-align: center;
                line-height: 39px;
              "
            >
              {{ content13 }}
            </div>
            <div style="display: flex; align-items: center">
              <div
                @click="submitNewProgram"
                style="
                  width: 177px;
                  height: 39px;
                  background: #2f6fb7;
                  border-radius: 5px;
                  cursor: pointer;
                  text-align: center;
                  line-height: 39px;
                "
              >
                {{ content8 }}
              </div>
              <div
                @click="dialogVisible3 = false"
                style="
                  width: 177px;
                  height: 39px;
                  background: #101937;
                  border-radius: 5px;
                  cursor: pointer;
                  text-align: center;
                  line-height: 39px;
                "
              >
                {{ content9 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <div
      style="width: 100%; display: flex; justify-content: start; margin: 20px 0"
    >
      <el-checkbox
        @change="changeMinimizeOnStartup"
        v-model="MinimizeOnStartup"
        style="margin-left: 20px"
        >启动后最小化显示</el-checkbox
      >
    </div>
    <div
      style="width: 100%; display: flex; justify-content: start; margin: 20px 0"
    >
      <el-button
        @click="dialogVisible1 = true"
        type="primary"
        slot="reference"
        style="margin-left: 20px"
        >{{ content17 }}</el-button
      >
    </div>
    <div
      style="
        flex: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        border-bottom: solid 2px black;
      "
    >
      <draggable v-model="hallArr" @end="changeHallOrder()">
        <div
          style="
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            cursor: pointer;
          "
          v-for="(screenItem, screenIndex) in hallArr"
          :key="screenIndex"
        >
          <div style="font-size: 20px; margin-left: 20px; text-align: left">
            {{
              language == "简体中文"
                ? screenItem.exhibitionHall
                : language == "繁体中文"
                ? screenItem.exhibitionHallInTraditional
                : screenItem.exhibitionHallInEnglish
            }}
          </div>
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              margin-left: 20px;
              margin-top: 20px;
            "
          >
            <draggable
              v-model="screenList[screenItem.exhibitionHall]"
              @start="onStart()"
              @end="onEnd(screenIndex, screenList[screenItem.exhibitionHall])"
            >
              <el-button
                @click="getScreenDetailById(item.id)"
                type="primary"
                v-for="(item, index) in screenList[screenItem.exhibitionHall]"
                :key="index"
                >{{
                  language == "简体中文"
                    ? item.screenName
                    : language == "繁体中文"
                    ? item.screenNameInTraditional
                    : item.screenNameInEnglish
                }}</el-button
              >
            </draggable>
          </div>
        </div>
      </draggable>
    </div>
    <div
      style="
        flex: 1;
        display: flex;
        flex-direction: column;
        border-bottom: solid 1px black;
      "
    >
      <div style="width: 100%; display: flex; margin: 10px">
        <el-button @click="dialogVisible2 = true" type="primary">{{
          content10
        }}</el-button>
      </div>
      <div style="display: flex; flex-wrap: wrap">
        <el-button
          @click="getIframeDetailById(item.id)"
          style="margin-left: 10px; margin-bottom: 10px"
          type="primary"
          v-for="(item, index) in iframeList"
          :key="index"
        >
          {{
            language == "简体中文"
              ? item.iframeName
              : language == "繁体中文"
              ? item.iframeNameInTraditional
              : item.iframeNameInEnglish
          }}
        </el-button>
      </div>
    </div>
    <div style="flex: 1; display: flex; flex-direction: column">
      <div style="width: 100%; display: flex; margin: 10px">
        <el-button @click="dialogVisible3 = true" type="primary">{{
          content14
        }}</el-button>
      </div>
      <div style="display: flex; flex-wrap: wrap">
        <el-button
          @click="getProgramDetailById(item.id)"
          style="margin-left: 10px; margin-bottom: 10px"
          type="primary"
          v-for="(item, index) in programList"
          :key="index"
        >
          {{
            language == "简体中文"
              ? item.programName
              : language == "繁体中文"
              ? item.programNameInTraditional
              : item.programNameInEnglish
          }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
import { mapState } from "vuex";
import draggable from "vuedraggable";
import eventBus from "../util/myEventBus";
export default {
  computed: {
    ...mapState({
      language: (state) => state.language,
    }),
  },
  components: {
    draggable,
  },
  data() {
    return {
      changeIndexItem: [],
      content1: "提示",
      content2: "添加展厅",
      content3: "展厅名称",
      content4: "屏幕名称",
      content5: "序列ID",
      content6: "265流地址",
      content7: "删除",
      content8: "提交",
      content9: "关闭",
      content10: "添加底部子页面",
      content11: "页面名称",
      content12: "页面网址(简体中文)",
      content13: "删除",
      content14: "添加节目",
      content15: "节目名称",
      content16: "序列Id",
      content17: "添加屏幕",
      content18: "页面网址(繁体中文)",
      content19: "页面网址(英文)",
      content20: "返回",
      content21: "设置密码",
      content22: "取消",
      content23: "确认",
      content24: "设置后台密码",
      content25: "母菜单栏",
      content26: "是否为菜单项",
      content27: "是否需要密码",
      content28: "密码",
      content29: "是",
      content30: "否",
      content31: "音频服务器IP",
      content32: "音频服务器端口",
      content33: "音频ID",
      content34: "音频控制",
      dialogVisible3: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible: false,
      password: null,

      commandForm: {
        exhibitionHall: null,
        screenName: null,
        sequenceId: null,
        streamUrl: null,
        exhibitionHallInTraditional: null,
        exhibitionHallInEnglish: null,
        screenNameInTraditional: null,
        screenNameInEnglish: null,
      },
      screenList: null,
      IframeForm: {
        iframeName: null,
        iframeUrl: null,
        iframeNameInTraditional: null,
        iframeNameInEnglish: null,
        iframeUrlTraditional: null,
        iframeUrlEnglish: null,
        needPassword: "2",
        password: null,
        isMenuItem: "2",
        monMenu: -1,
        audioServerIp: null,
        audioServerPort: null,
        commandToGetCurrentVolume: null,
        commandToChangeCurrentVolume: null,
        commandToMuteCurrentVolume: null,
        isAudioControl: "0",
      },
      iframeList: [],
      ProgramForm: {
        programName: null,
        cueId: null,
        sqId: null,
        programNameInTraditional: null,
        programNameInEnglish: null,
      },
      programList: [],
      hallArr: [],
      MinimizeOnStartup: true,
    };
  },
  methods: {
    async getSettings() {
      let res = await request({
        url: "/language/api/getSettings",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.MinimizeOnStartup = res.data.data.MinimizeOnStartup
      }
    },
    async changeMinimizeOnStartup() {
    this.$store.state.lastMethod = "changeMinimizeOnStartup";
      this.$store.state.lastData = null;
      let res = await request({
        url: "/language/api/changeMinimizeOnStartup/" + this.MinimizeOnStartup,
        method: "POST",
      });
      if (res.data.status) {
        console.log(res.data.data);
      }
    },
    gotoCenterControl() {
      this.$router.push("/index");
    },
    async changeMonMenu(event) {
      let res = await request({
        url:
          "/iframe/api/checkMonMenuIsAim/" +
          event.target.value +
          "/" +
          "音频控制",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.IframeForm.isAudioControl = res.data.data;
      }
    },
    async changeHallOrder() {
      let newOrder = "";
      for (let index = 0; index < this.hallArr.length; index++) {
        const element = this.hallArr[index];
        newOrder = newOrder + element.exhibitionHall;
        if (index < this.hallArr.length - 1) {
          newOrder = newOrder + ",";
        }
      }
      let res1 = await request({
        url: "/screen/api/changeHallOrder",
        method: "POST",
        data: {
          nameList: newOrder,
        },
      });
    },
    onStart(evt) {},
    async onEnd(screenIndex, evt) {
      let res = "";
      for (let index = 0; index < evt.length; index++) {
        const element = evt[index];
        res = res + element.id;
        if (index < evt.length - 1) {
          res = res + ",";
        }
      }

      let res1 = await request({
        url: "/screen/api/changeOrder",
        method: "POST",
        data: {
          hallName: screenIndex,
          idList: res,
        },
      });
      console.log(res1);
    },
    async handleCommand1(command) {
      let res = await request({
        url: "/language/api/changeLanguage/" + command,
        method: "POST",
      });
      if (res.data.status == 200) {
        this.$store.commit("changeLanguage", command);
        this.changeLanguage();
        this.getAllHall();
        this.showIframe(this.clickIframe);
      }
    },
    dragstart(index) {
      console.log("start index ===>>> ", index);
      this.dragIndex = index;
    },

    // dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素。
    // 因此，我们要在这两个拖放事件中使用`preventDefault`来阻止浏览器的默认行为
    dragenter(e, index) {
      e.preventDefault();
      this.enterIndex = index;
      if (this.timeout !== null) {
        clearTimeout(this.timeout);
      }
      // 拖拽事件的防抖
      this.timeout = setTimeout(() => {
        if (this.dragIndex !== index) {
          const source = this.list[this.dragIndex];
          this.list.splice(this.dragIndex, 1);
          this.list.splice(index, 0, source);
          // 排序变化后目标对象的索引变成源对象的索引
          this.dragIndex = index;
        }
      }, 100);
    },
    dragover(e, index) {
      e.preventDefault();
    },
    handleCommand(command) {
      this.IframeForm.monMenu = command;
    },
    async submitNewPassword() {
      console.log(this.password);
      let res = await request({
        url: "/language/api/submitNewPassword/" + this.password,
        method: "POST",
      });
      if (res.data.status == 200) {
        this.dialogVisible = false;
      }
    },
    async openPasswordWin() {
      this.dialogVisible = true;
      let res = await request({
        url: "/language/api/getPassword",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.password = res.data.data;
        this.dialogVisible = true;
      }
    },
    async checkPassword(pwd) {
      let res = await request({
        url: "/language/api/checkPassword/" + pwd,
        method: "GET",
      });
      if (res.data.status == 200) {
        if (res.data.data == false) {
          alert("密码错误");
          this.gobackLastPage();
        }
      }
    },
    gobackLastPage() {
      this.$router.go(-1);
    },
    async submitNewProgram() {
      let requestUrl;
      if (this.ProgramForm.id == null) {
        requestUrl = "/program/api/submitNewProgram";
      } else {
        requestUrl = "/program/api/updateProgramInfo";
      }
      let res = await request({
        url: requestUrl,
        method: "POST",
        data: this.ProgramForm,
      });
      if (res.data.status == 200) {
        this.handleClose();
        this.getAllProgram();
      }
    },
    async deleteIframeById(id) {
      let res = await request({
        url: "/iframe/api/deleteFrameById/" + id,
        method: "DELETE",
      });
      if (res.data.status == 200) {
        this.handleClose();
        this.getAllIframe();
      }
    },
    async deleteProgramById(id) {
      let res = await request({
        url: "/program/api/deleteProgramById/" + id,
        method: "DELETE",
      });
      if (res.data.status == 200) {
        this.handleClose();
        this.getAllProgram();
      }
    },
    async deleteScreenById(id) {
      let res = await request({
        url: "/screen/api/deleteScreenById/" + id,
        method: "DELETE",
      });
      if (res.data.status == 200) {
        this.handleClose();
        this.getAllScreen();
        this.getAllHall();
      }
    },
    async getIframeDetailById(id) {
      let res = await request({
        url: "/iframe/api/getIframeDetailById/" + id,
        method: "GET",
      });
      if (res.data.status == 200) {
        this.IframeForm = res.data.data;
        this.dialogVisible2 = true;
      }
    },
    async getAllIframe() {
      let res = await request({
        url: "/iframe/api/getAllIframe",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.iframeList = res.data.data;
      }
    },
    async submitNewIframe() {
      let requestUrl;
      if (this.IframeForm.id == null) {
        requestUrl = "/iframe/api/submitNewIframe";
      } else {
        requestUrl = "/iframe/api/updateIframeInfo";
      }
      let res = await request({
        url: requestUrl,
        method: "POST",
        data: this.IframeForm,
      });
      if (res.data.status == 200) {
        this.handleClose();
        this.getAllIframe();
      }
    },
    async handleClose() {
      this.commandForm = {
        exhibitionHall: null,
        screenName: null,
        sequenceId: null,
        streamUrl: null,
        exhibitionHallInTraditional: null,
        exhibitionHallInEnglish: null,
        screenNameInTraditional: null,
        screenNameInEnglish: null,
      };
      this.IframeForm = {
        iframeName: null,
        iframeUrl: null,
        iframeNameInTraditional: null,
        iframeNameInEnglish: null,
        iframeUrlTraditional: null,
        iframeUrlEnglish: null,
        needPassword: "2",
        password: null,
        isMenuItem: "2",
        monMenu: -1,
        audioServerIp: null,
        audioServerPort: null,
        commandToGetCurrentVolume: null,
        commandToChangeCurrentVolume: null,
        commandToMuteCurrentVolume: null,
        isAudioControl: "0",
      };
      this.ProgramForm = {
        programName: null,
        cueId: null,
        sqId: null,
        programNameInTraditional: null,
        programNameInEnglish: null,
      };
      this.dialogVisible1 = false;
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
      this.dialogVisible = false;
      this.password = null;
    },
    async getScreenDetailById(id) {
      let resOfGetScreenDetailById = await request({
        url: "/screen/api/getScreenDetailById/" + id,
        method: "GET",
      });
      if (resOfGetScreenDetailById.data.status == 200) {
        this.dialogVisible1 = true;
        this.commandForm = resOfGetScreenDetailById.data.data;
      }
    },
    async getProgramDetailById(id) {
      let resOfgetProgramDetailById = await request({
        url: "/program/api/getProgramDetailById/" + id,
        method: "GET",
      });
      if (resOfgetProgramDetailById.data.status == 200) {
        this.dialogVisible3 = true;
        this.ProgramForm = resOfgetProgramDetailById.data.data;
      }
    },
    async submitNewScreen() {
      let requestUrl;
      console.log(this.commandForm);
      if (this.commandForm.id == null) {
        requestUrl = "/screen/api/submitNewScreen";
      } else {
        requestUrl = "/screen/api/updateScreenInfo";
      }
      let res = await request({
        url: requestUrl,
        method: "POST",
        data: this.commandForm,
      });
      if (res.data.status == 200) {
        this.handleClose();
        this.getAllScreen();
        this.getAllHall();
      }
    },
    async getAllProgram() {
      let resOfGetAllScreen = await request({
        url: "/program/api/getAllProgramList",
        method: "GET",
      });
      if (resOfGetAllScreen.data.status == 200) {
        this.programList = resOfGetAllScreen.data.data;
      }
    },
    async getAllScreen() {
      let resOfGetAllScreen = await request({
        url: "/screen/api/getAllScreenList",
        method: "GET",
      });
      if (resOfGetAllScreen.data.status == 200) {
        this.screenList = resOfGetAllScreen.data.data;
      }
    },
    changeLanguage() {
      if (this.language == "简体中文") {
        this.content1 = "提示";
        this.content2 = "添加展厅";
        this.content3 = "展厅名称";
        this.content4 = "屏幕名称";
        this.content5 = "序列ID";
        this.content6 = "265流地址";
        this.content7 = "删除";
        this.content8 = "提交";
        this.content9 = "关闭";
        this.content10 = "添加底部子页面";
        this.content11 = "页面名称";
        this.content12 = "页面网址";
        this.content13 = "删除";
        this.content14 = "添加节目";
        this.content15 = "节目名称";
        this.content16 = "序列Id";
        this.content17 = "添加屏幕";
        this.content20 = "返回";
        this.content21 = "设置密码";
        this.content22 = "取消";
        this.content23 = "确认";
        this.content24 = "设置后台密码";
        this.content25 = "母菜单栏";
        this.content26 = "是否为菜单项";
        this.content27 = "是否需要密码";
        this.content28 = "密码";
        this.content29 = "是";
        this.content30 = "否";
      }

      if (this.language == "English") {
        this.content1 = "Prompt";
        this.content2 = "Add Exhibition Hall";
        this.content3 = "Exhibition Hall Name";
        this.content4 = "Screen Name";
        this.content5 = "Sequence ID";
        this.content6 = "265 Stream Address";
        this.content7 = "Delete";
        this.content8 = "Submit";
        this.content9 = "Close";
        this.content10 = "Add Bottom Subpage";
        this.content11 = "Page Name";
        this.content12 = "Page URL";
        this.content13 = "Delete";
        this.content14 = "Add Program";
        this.content15 = "Program Name";
        this.content16 = "Sequence ID";
        this.content17 = "Add Screen";
        this.content20 = "go back";
        this.content21 = "Set Password";
        this.content22 = "cancel";
        this.content23 = "confirm";
        this.content24 = "Set backend password";
        this.content25 = "Main Menu Bar";
        this.content26 = "Is it a Menu Item";
        this.content27 = "Require Password";
        this.content28 = "Password";
        this.content29 = "yes";
        this.content30 = "no";
      }

      if (this.language == "繁体中文") {
        this.content1 = "提示";
        this.content2 = "添加展厅";
        this.content3 = "展厅名稱";
        this.content4 = "屏幕名稱";
        this.content5 = "序列ID";
        this.content6 = "265流地址";
        this.content7 = "刪除";
        this.content8 = "提交";
        this.content9 = "關閉";
        this.content10 = "添加底部子頁面";
        this.content11 = "頁面名稱";
        this.content12 = "頁面網址";
        this.content13 = "刪除";
        this.content14 = "添加節目";
        this.content15 = "節目名稱";
        this.content16 = "序列Id";
        this.content17 = "添加屏幕";
        this.content20 = "返回";
        this.content21 = "設定密碼";
        this.content22 = "取消";
        this.content23 = "確定";
        this.content24 = "設置後台密碼";
        this.content25 = "母菜單欄";
        this.content26 = "是否為菜單項";
        this.content27 = "是否需要密碼";
        this.content28 = "密碼";
        this.content29 = "是";
        this.content30 = "否";
      }
    },
    async getAllHall() {
      let res = await request({
        url: "/screen/api/getAllHall",
        method: "GET",
      });
      if (res.data.status == 200) {
        // this.hallArr = res.data.data;
        console.log(this.hallArr);
      }
    },
  },
  mounted() {
    this.changeLanguage();
    this.getSettings();
    this.getAllScreen();
    this.getAllIframe();
    this.getAllProgram();
    this.getAllHall();
    eventBus.$on("changeMinimizeOnStartup", this.changeMinimizeOnStartup);
  },
  beforeDestroy(){
    eventBus.$off("changeMinimizeOnStartup")
  }
};
</script>

<style scoped>
.tree-cesium-container {
  background: #182245;
}

.tree-cesium-container .el-dialog__header {
  display: none;
}

.tree-cesium-container .el-dialog__body {
  padding: 0;
}

.list-item {
  transition: transform 0.3s;
  cursor: move;
  text-align: center;
}
</style>